<template>
	<div>

		<!-- 选择要移动的货位 -->

		<div style="font-weight: 800;">选择移动数量</div>

		<van-cell title="选择商品所在货位" is-link @click="showPopup" :value="from_location" />

		<van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
			<van-picker title="选择商品所在货位" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel"
				@change="onChange" />

		</van-popup>
		
		
		<!-- 选择to_warehouse -->
		
		<changeWareHouse Title='选择移动至库房' v-on:listenToChangeWarehouseEvent='ChangeToWareHouse'></changeWareHouse>


		<!-- 选择to_location -->

		<changeLocation :warehouseId='to_warehouse_id' v-on:listenToChangeLocationEvent="ChangeLocationEvent">
		</changeLocation>


		<!-- 选择数量 -->
		<van-cell title="选择数量">
			<!-- 使用 right-icon 插槽来自定义右侧图标 -->
			<template #right-icon>
				<!-- <van-icon name="search" class="search-icon" /> -->
				<van-stepper min="0" v-model="value" :max="max" :default-value="max" style="display: block;" />
			</template>
		</van-cell>

		<div style="height: 20px;"></div>

		<van-button type="warning" size="large" @click="move">移库提交</van-button>


	</div>
</template>

<script>
	import {
		Toast, Dialog
	} from 'vant'
	import changeLocation from "../change_item/change_location.vue"
	import changeWareHouse from "../change_item/change_warehouse.vue"
	import move_sku_location from "../../utils/move_sku_location.js"
	import select_sku_in_where_location from '../../utils/select_sku_in_where_location.js'
	export default {
		name: '',
		// components: ['changeLocation'],
		components: {
			changeLocation, changeWareHouse
		},
		props: ['skuId', 'warehouseId'],
		data() {
			return {
				show: false,
				sku_id: this.skuId,
				warehouse_id: this.warehouseId,
				to_warehouse_id: null,
				detail_list: [],

				from_location: '选择货位',
				from_location_id: null,
				to_location_id: '',

				all_location: [],
				columns: [],

				value: null,
				max: 0,
			}
		},
		methods: {
			
			
			ChangeToWareHouse(data){
				
				this.to_warehouse_id = data.warehouse_id
				
			},

			showPopup() {
				this.show = true
			},

			move() {

				if (this.from_location == '选择货位' || this.to_location_id == '' || this.value == 0 || this.sku_id == '') {
					Toast("请选择完整！！！")

					return
				}


				Dialog.confirm({
						title: '确认',
						message: '请确认货位已摆放到位',
					})
					.then(() => {
						// on confirm

						move_sku_location(
							this.from_location_id,
							this.to_location_id,
							this.sku_id,
							this.value,
							res => {
								Toast(res)
								this.select_sku_in_where_location_()

							}
						)
					})
					.catch(() => {
						// on cancel
					});






			},


			onConfirm(value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
				this.from_location = this.columns[index]
				this.from_location_id = this.detail_list.detail[index].location_id
				this.max = this.detail_list.detail[index].sum
				this.value = this.max
				// console.log(this.from_location_id)
				this.show = false
			},
			onChange(picker, value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
				console.log(this.detail_list.detail[index])
				this.from_location = this.columns[index]
				this.from_location_id = this.detail_list.detail[index].location_id
				this.max = this.detail_list.detail[index].sum
				this.value = this.max
				// console.log(this.from_location_id)

			},
			onCancel() {
				Toast('取消');
				this.show = false
			},


			ChangeLocationEvent(data) {
				// console.log(data)

				this.to_location_id = data.location_id
				console.log(this.to_location_id)
			},

			select_sku_in_where_location_() {
				select_sku_in_where_location(
					this.warehouse_id, this.sku_id,
					res => {
						console.log(res)
						this.from_location = '请选择货位'
						this.from_location_id = null

						this.columns = []

						this.detail_list = res

						for (let i of res.detail) {
							this.columns.push(i.location_name + ' 数量:' + i.sum)
						}
						// console.log(this.columns)
					}
				)
			}
		},
		computed: {},
		watch: {
			skuId: function(val, oldVal) {
				console.log('new: %s, old: %s', val, oldVal)
				this.sku_id = val
				this.select_sku_in_where_location_()

			},
		},
		created() {},
		mounted() {

			this.select_sku_in_where_location_()



		},
	}
</script>

<style scoped lang="less">

</style>
